<script setup>
// #region 引入包, 函数和组件
import { ref, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router"; // 路由信息
import Loading from "@/components/Loading2.vue"; // 加载中组件
import getInterface from "@/api"; // 接口函数
import { postInterface } from "@/api"; // 接口函数
import TimeSwitch from "@/components/TimeSwitch.vue"; // 时间切换组件
import FilterCinemas from "./components/filterCinemas.vue"; // 筛选电影院组件
import CinemaList from "@/components/CinemaList.vue"; // 影院列表组件
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const route = useRoute();
const router = useRouter();
// #endregion

// #region // 变量
const loading = ref(false); // 显示加载中
const filmName = ref(""); // 电影的名字
const cityId = JSON.parse(localStorage.getItem("cityId")).id; // 城市id
const filmId = route.params.filmId; // 电影id
const showCinemas = ref(null); // 各个天数会上映该电影的影院id
const curIndex = ref(0); // 当前时间场次的下标
// const filmImg = ref(""); // 电影图片
const cinemas = ref(null); // 影院列表
const curCinemas = ref(null); // 筛选后的影院数组
const hidden = ref(false);
// #endregion

// #region // 函数
const goBack = () => router.back(); // 返回
const getCinemas = async () => {
  try {
    loading.value = true;
    const form = new FormData();
    // console.log({
    //   cityId,
    //   cinemas: times.value[curIndex.value].cinemaList.join(),
    // });
    // form.append("cityId", cityId);
    // form.append("cinemas", times.value[curIndex.value].cinemaList.join());
    const res = await postInterface(
      JSON.stringify({
        cityId,
        cinemaIds: times.value[curIndex.value].cinemaList.join(),
      }),
      "cinema.batch-cinema"
    );
    // console.log(res);
    cinemas.value = res.data.data.cinemas;
    // console.log(cinemas.value);
    loading.value = false; // 隐藏加载中
  } catch (error) {
    loading.value = false; // 隐藏加载中
    // console.log(error);
  }
};
// #endregion

// #region // 生命周期和vue函数
try {
  loading.value = true; // 显示加载中
  // 调电影详情接口
  getInterface({ filmId }, "film.info")
    .then((res) => {
      // console.log(res);
      filmName.value = res.data.data.film.name; // 拿到电影的名字
      // filmImg.value = res.data.data.film.photos;
      // console.log(filmName.value)
      // console.log(filmImg.value);
      // 调城市电影时间安排表接口
      return getInterface({ filmId, cityId }, "cinema.film-show-cinema");
    })
    .then((res) => {
      // console.log(res.data.data);
      showCinemas.value = res.data.data.showCinemas; // 获取到时间段的播放电影的影院
      loading.value = false; // 隐藏加载中
      getCinemas();
    });
} catch (error) {
  loading.value = false; // 隐藏加载中
  // console.log(error);
}
// console.log(route.path);
const times = computed(() => {
  if (!showCinemas.value) return [];
  return showCinemas.value.sort((a, b) => a.showDate - b.showDate);
});
// 监听curIndex变化, 调接口
watch(curIndex, (nVal) => {
  getCinemas();
});
// #endregion
</script>

<template>
  <div class="filmcinemas">
    <header>
      <i @click="goBack">&lt;</i>
      <span>{{ filmName }}</span>
      <em>&telrec;</em>
    </header>

    <main :style="hidden ? 'overflow:hidden;' : ''">
      <div class="timeswitch">
        <time-switch :times v-model:curIndex="curIndex"></time-switch>
      </div>

      <div class="filter_cinemas">
        <filter-cinemas
          v-model:hidden="hidden"
          :cinemas
          v-model:curCinemas="curCinemas"
        ></filter-cinemas>
      </div>

      <cinema-list
        :filmId
        :showCinemas
        :curIndex
        :curCinemas
      ></cinema-list>
    </main>

    <Loading :loading></Loading>
  </div>
</template>

<style lang="scss" scoped>
@mixin nowrap($size, $color) {
  font-size: $size;
  color: $color;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.filmcinemas {
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  text-align: center;
  border-bottom: 0.01rem solid #f7f7f7;
  line-height: 0.44rem;
  position: relative;
  background: #fff;
  z-index: 11;
  i {
    position: fixed;
    display: block;
    font-size: 0.24rem;
    transform: scale(0.8, 1.4);
    z-index: 2;
    width: 0.375rem;
    height: 0.2142857143rem;
    line-height: 0.18rem;
    text-align: left;
    padding-left: 0.08rem;
    top: 0.12rem;
    color: #666;
  }
  em {
    position: absolute;
    right: 0.15rem;
    transform: rotateY(180deg);
    font-size: 0.34rem;
    color: #666;
    top: -0.05rem;
  }
  span {
    font-size: 0.17rem;
    color: var(--cl-blk);
  }
}

main {
  overflow: hidden;
  overflow-y: auto;
  flex: 1;

  .timeswitch {
    height: 0.49rem;
    z-index: 11;
    position: relative;
    background: #fff;
  }

  .filter_cinemas {
    height: 0.5rem;
    z-index: 9;
  }
}
</style>
